<template>
  <div class="subject-index">
    <!--表格头部信息条-->
    <div class="top-pane">
      <div class="ivu-mt ivu-alert ivu-alert-info ivu-alert-with-icon">
        <span class="ivu-alert-icon"><i class="ivu-icon ivu-icon-ios-information-circle"></i></span>
        <span class="ivu-alert-message">
        <div style="font-size: 14px;">总记录数 <strong style="color: rgb(45, 140, 240);">{{ total }}</strong> 条</div>
      </span>
        <span class="ivu-alert-desc"></span>
      </div>
    </div>
    <div class="table-paper">
      <!--<Table :columns="columns" :data="subjectList"></Table>-->
      <div class="exam-lists">
        <div class="exam-item" v-for="subject in subjectList">
          <h3 class="h"><span>{{ subject.subjectContent }}</span></h3>
          <div class="over-difficulty"><span>所属试卷</span>
            <div class="level">{{ subject.paperName }}</div>
          </div>
          <div class="over-text"><span class="query-answer">标准答案</span>
            <span v-if="subject.optionContent !== null">{{ subject.optionContent }}</span>
            <span v-if="subject.optionContent === null" style="color: rgb(204, 68, 7)">暂未录入选项</span>
          </div>
          <div class="create-time">
            <span class="subject-icon">题目标签<span class="icon_label">{{ subject.categoryName }}</span></span>
            <span>{{ dateFormat(subject.createTime) }}</span>
          </div>
          <div class="option-menu">
            <a class="add-subject-option" v-on:click="toAddOption(subject)"><Icon type="md-add"></Icon>添加选项</a>
          </div>
        </div>
      </div>
    </div>
    <Page :total="total" :current="pageNum" :page-size="pageSize" show-total class="paging" @on-change="changePage" @on-page-size-change="changePageSize"></Page>
    <!--添加题目抽屉-->
    <div class="add-paper-modal">
      <Drawer title="添加选项" :closable="false" v-model="showOptionDrawer" width="40%" scrollable
              class="paper-subject-drawer">
        <Form :model="optionEntity" ref="optionForm" class="add-subject-form" >
          <FormItem label="题目内容">
            <Input v-model="subjectContent" readonly></Input>
          </FormItem>
          <div class="ivu-alert ivu-alert-warning ivu-alert-with-desc">
            <Icon type="md-information-circle" class="warm-icon"/>
            <span class="ivu-alert-desc">
            点击下列【添加选项】可动态增加该题选项，每题选项基本保持四个即可。</span></div>
          <FormItem :key="index" :label="'选项' + (index == 0 ? 'A' : (index == 1 ? 'B' : (index == 2 ? 'C' : 'D')))"
                    v-for="(item, index) in optionEntity.optionEntities" :prop="'optionEntities.' + index + '.optionContent'"
                    :rules="{required: true, message: '选项'+(index == 0 ? 'A' : (index == 1 ? 'B' : (index == 2 ? 'C' : 'D')))+'不能为空', trigger: 'blur'}">
            <Row>
              <Col span="28" style="width: 80%">
                <Input type="text" v-model="item.optionContent" :placeholder="'请输入选项'+ (index == 0 ? 'A' : (index == 1 ? 'B' : (index == 2 ? 'C' : 'D'))) + '信息'"></Input>
              </Col>
              <Col span="4" offset="1" style="margin-left: 10px;right: 0;position: absolute;">
                <Button @click="handleRemove(index)" shape="circle">
                  <Icon type="md-trash"></Icon>
                </Button>
              </Col>
            </Row>
          </FormItem>
          <Button type="dashed" icon="md-add" @click="handleAdd(optionEntity.optionEntities.length)" class="add-subject-option" v-if="optionEntity.optionEntities.length < 4">添加选项</Button>
          <!--从动态添加的选项里加载 :rules="{type: 'number', required: true, message: '标准答案不能为空', trigger: 'change'}" -->
          <FormItem label="标准答案" prop="optionId">
            <Select v-model="optionId">
              <Option v-for="option in optionEntity.optionEntities" :value="option.optionId">{{ option.optionContent }}</Option>
            </Select>
          </FormItem>
        </Form>
        <div class="page-drawer-footer">
          <Button type="primary" @click="saveSubject('optionForm')">确定</Button>
        </div>
      </Drawer>
    </div>
  </div>
</template>

<script>
import { globalUrl } from '@/api/doMain'

export default {
  inject: ['reload'], // 引入局部刷新到组件
  name: 'Subject',
  created () {
    this.queryList()
  },
  data () {
    return {
      subjectList: [],
      pageSize: 12,
      pageNum: 1,
      total: 0,
      subjectContent: '', // 打开抽屉的题目内容
      showOptionDrawer: false,
      index: 1, // 动态添加的FormItem个数
      optionEntity: {
        optionEntities: [{
          optionContent: '',
          optionId: 1
        }]
      },
      optionId: 0, // 标准答案
      choiceSubjectId: 0 // 要添加试题的试卷id
    }
  },
  methods: {
    queryList () {
      const that = this
      this.http.post(globalUrl + '/subject/queryList', { pageNum: that.pageNum, pageSize: that.pageSize, token: window.sessionStorage.getItem('token') }).then(function (response) {
        that.subjectList = response.data.data
        that.total = response.data.count
      })
    },
    // 打开添加试题抽屉
    toAddOption (params) {
      const that = this
      that.choiceSubjectId = params.subjectId
      that.subjectContent = params.subjectContent
      that.showOptionDrawer = true
    },
    // 添加试题
    saveSubject (optionForm) {
      const that = this
      const optionEntities = {
        token: window.sessionStorage.getItem('token'),
        subjectId: that.choiceSubjectId,
        optionEntities: that.optionEntity.optionEntities,
        optionId: that.optionId
      }
      this.$refs[optionForm].validate((valid) => {
        if (valid) {
          that.http.post(globalUrl + '/subject/addOptionList', optionEntities).then(function (response) {
            if (response.data.code === '000000') {
              that.msg.success('添加选项成功')
              that.reload()
            }
          })
        } else {
          that.msg.error('请完整录入必填项')
        }
      })
    },
    // 添加选项
    handleAdd () {
      this.optionEntity.optionEntities.push({
        optionContent: '',
        optionId: this.optionEntity.optionEntities.length
      })
    },
    // 删除选项
    handleRemove (index) {
      this.optionEntity.optionEntities.splice(index, 1)
    },
    changePage(index){
      //let _start = ( index - 1 ) * this.pageSize;
      //let _end = index * this.pageSize;
      //this.subjectList = this.subjectList.slice(_start, _end);
      this.pageNum = index
      this.queryList()
    },
    changePageSize(pageSize){
      console.log(pageSize)
      this.pageSize = pageSize;
    }
  }
}
</script>

<style>
  @import "../assets/base.css";
  .paging{
    text-align: center;
  }
</style>
